<template>
	<view class="page" @touchstart.stop="ptouchStart" @touchend.stop="ptouchEnd">
		<view class="shouye" v-if="!isroom">
			<view class="nav-scroll">
				<view class="nav uni-nav">
					<view class="nav-item tab" :class="swiperIndex == 0 ? 'nav-item-act' : ''" @click="taggleNav(0)">关注
					</view>
					<view class="nav-item tab" :class="swiperIndex == 1 ? 'nav-item-act' : ''" @click="taggleNav(1)">直播
					</view>
					<view class="nav-line" :style="style"></view>
				</view>
				<view class="btnlist">
					<view class="search-icon" @tap="goToSearch">
						<image src="../../static/image/sousuo.png" mode=""></image>
					</view>
					<view class="rank-icon" @tap="goToRank">
						<image src="../../static/image/paihang.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="swiper">
				<swiper :disable-touch="touch" :current="swiperIndex"  :duration="300" class="swiper-1" easing-function="linear"
					@change="swiperChange" :style="{ height: windowheight + 'px' }">
					<swiper-item @touchmove="touchmove" @touchstart="touchstart">
						<follow :show="swiperIndex"></follow>
					</swiper-item>
					<swiper-item @touchmove="touchmove" @touchstart="touchstart">
						<live :announcementText="announcementText" :slide="slide" :slide1="slide1" :list1="list1" :list2="list2"></live>
					</swiper-item>
			
				</swiper>
			</view>
			<view class="share" v-show="showShare" @click="share" v-if="swiperIndex">
				<image src="/static/image/share.gif" mode=""></image>
			</view>
			<uni-popup ref="gonggao"  :maskClick="false">
				<view class="gonggao-popup">
					<image class="gonggao-img" src="../../static/image/tanchuang.png"></image>
					<view class="body-content">
						<view class="gonggao-title">提示</view>
						<scroll-view scroll-y="true" class="scroll-box">
							<text class="gonggao-text" v-html="fuwenben"></text>
						</scroll-view>
						<view class="gonggao-btn">
							<view class="btn" @tap="share">去分享</view>
							<view class="btn" @tap="kaitong">去开通</view>
						</view>
					</view>
					<image src="../../static/image/close.png" class="gonggao-close" @tap="closegonggao"></image>
				</view>
			</uni-popup>
		</view>
		
		<!-- <view class="live" v-if="isroom">
			<transition name="ani">
			  <room  @roomClick="handleRoomClick" />
			</transition>
		</view> -->
	</view>
	
</template>

<script>
	import room from './room.vue';	
	import follow from './follow.vue';
	import live from './live.vue';
	export default {
		components: {
			follow,
			live,
			// room,
		},
		
		data() {
			return {
				announcementText: '',//滚动公告
				slide: [],//轮播图
				slide1: [],//轮播图
				list1: [],//轮播图
				list2: [],//轮播图
				swiperIndex: 1, //当前的swiperindex
				navItemWidth: '', //选中下划线的宽度
				navItemLeft: 0, //选中下划线的显示位置
				scrollToLeft: 0, //scrollview需要滚动的距离
				navInfos: [], //所有navitem的节点信息
				parentLeft: 0, //nav盒子的节点信息
				componentWidth: 0, //nav盒子的宽度
				touch:false, //是否允许滑动
				touchStart:0,//第一次滑动的位置
				refreStatus: false,
				isroom: false,
				showShare: true,
				windowheight: '',//可视高度
				fuwenben: '您还不是VIP用户或VIP已到期，请充值或者邀请新用户兑换VIP，邀请一个新用户可兑换1天VIP123456,您还不是VIP用户或VIP已到期，请充值或者邀请新用户兑换VIP，邀请一个新用户可兑换1天VIP,casjkfbhjasfbhujsdbfhujdbhj',
			};
		},
		created() {
			this.windowheight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad() {
			this.$api.checklogin();
			this.getHome();
			
		},
		onUnload() {
		},
		computed: {
			style() {
				return `width:${this.navItemWidth}px; left:${this.navItemLeft}px`;
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			// 分享
			share(){
				let uid = uni.getStorageSync('uid');
				let token = uni.getStorageSync('token');
				if(!token || !uid){
					this.login();
				}else{
					var share_url = uni.getStorageSync('config')['share_url'];
					uni.setStorageSync('src',share_url);
					var url = '/pages/index/index';
					uni.redirectTo({
						// url: '/pages/index/webview?backtype=1&url=' + url + '&src=' + share_url,
						url: '/pages/index/webview?backtype=1&url=' + url,
					})
				}
				// window.open('https:baidu.com');
			},
			// 首页数据
			getHome(){
				var token = '';
				var uid = 0;
				if(uni.getStorageSync('token')){
					token = uni.getStorageSync('token');
					uid = uni.getStorageSync('uid');
				}
				this.$api.sendRequest({
					data:{
						service:'Home.getHot',
						uid:uid,
						token:token,
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.announcementText = param.horse_msg;
							this.slide = param.slide;
							this.slide1 = param.slide[0];
							var list = param.list;
							this.list1 = list.slice(0, 4);
							this.list2 = list.slice(4);
						}
					}
				});
			},
			touchstart(res){
				this.touchStart = res.touches[0].clientX;
			},
			touchmove(res){
				if(this.swiperIndex == 0){
					res.touches[0].clientX> this.touchStart ? this.touch = true : this.touch = false;
					//如果滑动到了第一项，就禁止再向左滑动
				}else if(this.swiperIndex == 1){
					res.touches[0].clientX< this.touchStart ? this.touch = true : this.touch = false;
					//如果滑动到了最后一项，就禁止向右滑动
				}else{
					//以上条件都不符合，就随便滑动
					this.touch = false
				}
			},
			goToRank(){
				let uid = uni.getStorageSync('uid');
				let token = uni.getStorageSync('token');
				if(!token || !uid){
					this.login();
				}else{
					uni.redirectTo({
						url: "/pages/index/rank",
					})
				}
				
			},
			login(){
				uni.redirectTo({
					url: "/pages/login/login",
				})
			},
			goToSearch(){
				let uid = uni.getStorageSync('uid');
				let token = uni.getStorageSync('token');
				if(!token || !uid){
					this.login();
				}else{
					uni.redirectTo({
						url: "/pages/index/search",
					})
				}
			},
			kaitong(){
				uni.switchTab({
					url: "/pages/recharge/recharge",
				})
			},
			closegonggao(){
				this.$refs.gonggao.close();
			},
			// 获取dom信息
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.uni-nav').fields({
					rect: true,
					size: true
				}, res => {
					this.parentLeft = res.left;
					this.componentWidth = res.width;
				});
				query.selectAll('.nav-item').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						if (index == 1) {
							this.navItemWidth = item.width;
							this.navItemLeft = item.left;
						}
						this.navInfos.push({
							width: item.width,
							left: item.left
						});
					});
				});
				query.exec();
				
			},
			// 点击导航切换swiper
			taggleNav(val) {
				this.swiperIndex = val;
			},
			// 滚动tabs以及移动下划线
			scrollDom() {
				let info = this.navInfos[this.swiperIndex];
				let offsetLeft = info.left - this.parentLeft;
				let scrollLeft = offsetLeft - (this.componentWidth - info.width) / 2;
				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
				this.navItemLeft = this.navInfos[this.swiperIndex].left;
				setTimeout(() => {
					this.navItemWidth = info.width;
				}, 50);
			},
			// swiper的index变动
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
				this.scrollDom();
				// this.$emit('currentIndex', this.swiperIndex);
			},
			ptouchStart(e){
				this.showShare = false;
			},
			ptouchEnd(e){
				this.showShare = true;
			},
		}
	};
</script>

<style lang="scss" scoped>
	page,
	.page {
		background-color: #ffffff;
		height: 100%;
	}
	.nav-item {
		display: inline-block;
		margin: 0 16upx;
		text-align: center;
		transition: color 0.3s ease;
	}
	.nav-scroll {
		width: 100%;
		background: #ffffff;
		height: 100upx;
		z-index: 999;
		position: fixed;
		top: 0;
		.btnlist {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 12rpx 20rpx;
			.search-icon,
			.rank-icon {
				margin-right: 10rpx;
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}

	.nav {
		white-space: nowrap;
		position: fixed;
		height: 100upx;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 0 20rpx;
	}

	/* #ifndef APP-NVUE */
	::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
	}

	/* #endif */
	.tab {
		font-size: 40rpx;
		color: #3D3D3D;
	}

	.nav-item-act {
		color: #1D1D1D;
		font-size: 40rpx;
		font-weight: bold;
	}

	.nav-line {
		position: absolute;
		bottom: 0;
		height: 10upx;
		border-radius: 10upx;
		background-color: #C089FF;
		transition: left 0.3s ease;
	}

	swiper {
		// height: calc(100vh - 100rpx);
		// height: 100vh;
	}

	.swiper {
		margin-top: 100rpx;
		// position: relative;
		// top: 120rpx;

		// margin-top: 100upx;
	}

	swiper-item {
		height: 100%;
		// text-align: center;
		color: #000;
		// position: relative;
		// background-color: skyblue;
		// color: #fff;
	}

	.swiper-item {
		overflow-y: scroll;
	}
	.share{
		position: fixed;
		bottom: 260rpx;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
<style lang="scss">
	// 公告
	.gonggao-popup {
		position: relative;
		/* #ifdef H5 */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 520rpx;
		width: 600rpx;
		.gonggao-img {
			width: 600rpx;
			height: 520rpx;
		}
		.gonggao-close {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 2rpx;
			right: 2rpx;
		}
		.body-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 600rpx;
			height: 520rpx;
			.gonggao-btn{
				width: 560rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.btn{
					background-image: linear-gradient(
					  90deg,
					  rgba(95, 195, 254, 1) 0,
					  rgba(198, 148, 254, 1) 100%
					);
					color: #FFFFFF;
					font-size: 26rpx;
					padding: 24rpx 90rpx;
					border-radius: 12rpx;
				}
			}
			.gonggao-title {
				font-size: 44rpx;
				font-weight: 500;
				color: #835FB5;
				text-align: center;
				margin-top: 130rpx;
			}
			.scroll-box {
				width: 520rpx;
				height: 160rpx;
				padding: 40rpx 40rpx 0 40rpx;
				font-size: 28rpx;
				// margin: 260rpx 0 0 30rpx;
			}
			
			.gonggao-close1 {
				background: #4378F7;
				color: #ffffff;
				width: 88%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 0 auto;
				border-radius: 16rpx;
			}
		}
	}
	
</style>